/* eslint-disable react/prop-types */
import { Scene, PointLayer, Source } from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";
import React, { useEffect } from "react";
import { LarkMap } from "@antv/larkmap";
export default function Map({ lng = 24.575878, lat = 118.05507599999999 }) {
	useEffect(() => {
		console.log(lat, lng);

		const scene = new Scene({
			id: "map",
			logoVisible: false,
			map: new GaodeMap({
				center: [118.05507599999999, 24.575878],
				// style: "dark",
				zoom: 12,
				token: "faeb2bbe1f88d233c53176966b02a889"
			})
		});
		scene.on("loaded", () => {
			fetch("https://gw.alipayobjects.com/os/bmw-prod/87e40417-a5da-4fdb-8313-c796ea15f982.csv")
				.then(res => res.text())
				.then(data => {
					const dataSource = new Source(data, {
						parser: {
							type: "text",
							x: "lng",
							y: "lat"
						},
						cluster: true
					});

					const pointLayer = new PointLayer({
						autoFit: true
					})
						.source(dataSource)
						.shape("circle")
						.scale("point_count", {
							type: "quantile"
						})
						.size("point_count", [5, 10, 15, 20, 25])
						.active(true)
						.color("rgb(73,167,86)")
						.style({
							strokeWidth: 1,
							stroke: "#fff"
						});

					// 聚合图标注
					const pointLayerText = new PointLayer({
						autoFit: false
					})
						.source(dataSource)
						.shape("point_count", "text")
						.size(15)
						.active(true)
						.color("#fff")
						.style({
							strokeWidth: 0,
							stroke: "#fff"
						});

					scene.addLayer(pointLayer);
					scene.addLayer(pointLayerText);
				});
		});
	}, []);
	return <LarkMap id="map" mapType="Gaode" style={{ height: "300px", padding: 0 }}></LarkMap>;
}
